<template>
  <view class="flex flex-col flex-col-center-center">
    <view
      class="relative overflow"
      :class="[`round-${props.round} mx-${props.margin[0]} my-${props.margin[1]}`]"
      :style="[{ width: `${props.width}rpx`, height: `${props.height}rpx` }]"
    >
      <swiper
        :indicator-dots="false"
        :interval="props.interval"
        :duration="props.duration"
        :circular="props.circular"
        :vertical="props.vertical"
        :acceleration="props.acceleration"
        :disableProgrammaticAnimation="props.disableProgrammaticAnimation"
        :autoplay="_autoplay"
        :displayMultipleItems="props.displayMultipleItems"
        :skipHiddenItemLayout="props.skipHiddenItemLayout"
        :disableTouch="props.disableTouch"
        :touchable="props.touchable"
        @change="sliderChange"
        :class="`round-${props.round}`"
        :current="_current"
        :style="[{ width: `${props.width}rpx`, height: `${props.height}rpx` }]"
      >
        <swiper-item
          :class="`round-${props.round}`"
          @click="emits('click', index)"
          v-for="(item, index) in _list"
          :key="index"
          :style="[{ width: `${props.width}rpx`, height: `${props.height}rpx` }]"
        >
          <tm-image
            :round="props.round"
            :userInteractionEnabled="false"
            :showLoad="props.showLoad"
            v-if="item.type == listItemType.img"
            :src="item.url"
            :width="props.width"
            :height="props.height"
          ></tm-image>
          <tm-image
            :round="props.round"
            :userInteractionEnabled="false"
            :showLoad="props.showLoad"
            v-if="item.type == listItemType.video && item.img && _currentActive != index"
            :src="item.img"
            :width="props.width"
            :height="props.height"
          ></tm-image>
          <video
            :userInteractionEnabled="false"
            id="video"
            v-if="item.type == listItemType.video && _currentActive === index"
            :src="item.url"
            :style="[{ width: `${props.width}rpx`, height: `${props.height}rpx` }]"
            :autoplay="_currentActive === index"
            :class="`round-${props.round}`"
          ></video>
        </swiper-item>
      </swiper>
      <!-- dot -->
      <view
        class="absolute"
        v-if="_model == 'dot' && props.indicatorDots"
        :class="[
          _dotPosition == 'bottom' || _dotPosition == 'top' ? 'flex flex-row ' : '',
          _dotPosition == 'left' || _dotPosition == 'right' ? 'flex flex-col ' : '',
          _align == 'center' ? 'flex-center' : '',
          _align == 'left' ? 'flex-row-center-start ' : '',
          _align == 'right' ? 'flex-row-center-end ' : '',
          _dotPosition == 'left' && _align == 'left' ? 'ml-12 mt-24' : '',
          _dotPosition == 'left' && _align == 'right' ? 'ml-12 pb-24' : '',
          _dotPosition == 'right' && _align == 'left' ? 'pr-12 mt-24' : '',
          _dotPosition == 'right' && _align == 'right' ? 'pr-12 pb-24' : '',

          _dotPosition == 'bottom' && _align == 'left' ? 'ml-12 mb-24' : '',
          _dotPosition == 'bottom' && _align == 'right' ? 'pr-12 mb-24' : '',
          _dotPosition == 'top' && _align == 'left' ? 'ml-12 ' : '',
          _dotPosition == 'top' && _align == 'right' ? 'pr-12 ' : '',
        ]"
        :style="[
          _dotPosition == 'bottom'
            ? {
                left: '0px',
                bottom: '0px',
                width: `${props.width}rpx`,
                height: `${60}rpx`,
              }
            : '',
          _dotPosition == 'top'
            ? { left: '0px', top: '0px', width: `${props.width}rpx`, height: `${60}rpx` }
            : '',
          _dotPosition == 'left'
            ? { left: '0px', top: '0px', width: `${60}rpx`, height: `${props.height}rpx` }
            : '',
          _dotPosition == 'right'
            ? {
                right: '0px',
                top: '0px',
                width: `${60}rpx`,
                height: `${props.height}rpx`,
              }
            : '',
        ]"
      >
        <tm-sheet
          :margin="[10, 10]"
          :follow-theme="_currentActive == index ? props.followTheme : false"
          :padding="[0, 0]"
          :round="10"
          @click="dotClick(index)"
          :color="_currentActive == index ? props.color : 'white'"
          v-for="(item, index) in _list"
          :key="index"
          :width="18"
          :height="18"
        ></tm-sheet>
      </view>
      <!-- rect -->
      <view
        class="absolute"
        v-if="_model == 'rect' && props.indicatorDots"
        :class="[
          _dotPosition == 'bottom' || _dotPosition == 'top' ? 'flex flex-row ' : '',
          _dotPosition == 'left' || _dotPosition == 'right' ? 'flex flex-col ' : '',
          _align == 'center' ? 'flex-center' : '',
          _align == 'left' ? 'flex-row-center-start ' : '',
          _align == 'right' ? 'flex-row-center-end ' : '',
          _dotPosition == 'left' && _align == 'left' ? 'ml-12 mt-24' : '',
          _dotPosition == 'left' && _align == 'right' ? 'ml-12 pb-24' : '',
          _dotPosition == 'right' && _align == 'left' ? 'pr-12 mt-24' : '',
          _dotPosition == 'right' && _align == 'right' ? 'pr-12 pb-24' : '',

          _dotPosition == 'bottom' && _align == 'left' ? 'ml-12 mb-24' : '',
          _dotPosition == 'bottom' && _align == 'right' ? 'pr-12 mb-24' : '',
          _dotPosition == 'top' && _align == 'left' ? 'ml-12 ' : '',
          _dotPosition == 'top' && _align == 'right' ? 'pr-12 ' : '',
        ]"
        :style="[
          _dotPosition == 'bottom'
            ? {
                left: '0px',
                bottom: '0px',
                width: `${props.width}rpx`,
                height: `${60}rpx`,
              }
            : '',
          _dotPosition == 'top'
            ? { left: '0px', top: '0px', width: `${props.width}rpx`, height: `${60}rpx` }
            : '',
          _dotPosition == 'left'
            ? { left: '0px', top: '0px', width: `${60}rpx`, height: `${props.height}rpx` }
            : '',
          _dotPosition == 'right'
            ? {
                right: '0px',
                top: '0px',
                width: `${60}rpx`,
                height: `${props.height}rpx`,
              }
            : '',
        ]"
      >
        <tm-sheet
          :round="index == 0 || index == _list.length - 1 ? 10 : 0"
          :margin="_dotPosition == 'left' || _dotPosition == 'right' ? [10, 0] : [0, 10]"
          :padding="[0, 0]"
          @click="dotClick(index)"
          :follow-theme="_currentActive == index ? props.followTheme : false"
          :color="_currentActive == index ? props.color : 'white'"
          v-for="(item, index) in _list"
          :key="index"
          :width="_dotPosition == 'left' || _dotPosition == 'right' ? 6 : 36"
          :height="_dotPosition == 'left' || _dotPosition == 'right' ? 36 : 6"
        ></tm-sheet>
      </view>
      <!-- number -->
      <view
        class="absolute"
        v-if="_model == 'number' && props.indicatorDots"
        :class="[
          _dotPosition == 'bottom' || _dotPosition == 'top' ? 'flex flex-row ' : '',
          _dotPosition == 'left' || _dotPosition == 'right' ? 'flex flex-col ' : '',
          _align == 'center' ? 'flex-center' : '',
          _align == 'left' ? 'flex-row-center-start ' : '',
          _align == 'right' ? 'flex-row-center-end ' : '',

          _dotPosition == 'left' && _align == 'left' ? 'ml-12 mt-24' : '',
          _dotPosition == 'left' && _align == 'right' ? 'ml-12 pb-24' : '',
          _dotPosition == 'right' && _align == 'left' ? 'pr-12 mt-24' : '',
          _dotPosition == 'right' && _align == 'right' ? 'pr-12 pb-24' : '',

          _dotPosition == 'bottom' && _align == 'left' ? 'ml-12 mb-24' : '',
          _dotPosition == 'bottom' && _align == 'right' ? 'pr-12 mb-24 ' : '',
          _dotPosition == 'top' && _align == 'left' ? 'ml-12 ' : '',
          _dotPosition == 'top' && _align == 'right' ? 'pr-12 ' : '',
        ]"
        :style="[
          _dotPosition == 'bottom'
            ? {
                left: '0px',
                bottom: '0px',
                width: `${props.width}rpx`,
                height: `${60}rpx`,
                display: 'flex',
                justifyContent: 'center',
              }
            : '',
          _dotPosition == 'top'
            ? { left: '0px', top: '0px', width: `${props.width}rpx`, height: `${60}rpx` }
            : '',
          _dotPosition == 'left'
            ? { left: '0px', top: '0px', width: `${60}rpx`, height: `${props.height}rpx` }
            : '',
          _dotPosition == 'right'
            ? {
                right: '0px',
                top: '0px',
                width: `${60}rpx`,
                height: `${props.height}rpx`,
              }
            : '',
        ]"
      >
        <view
          class="round-10"
          :class="[
            _dotPosition == 'left' || _dotPosition == 'right' ? 'px-5 py-24 ' : '',
            _dotPosition == 'bottom' || _dotPosition == 'top' ? 'px-24 py-5 mx-32' : '',
          ]"
          style="background-color: rgba(0, 0, 0, 0.4); font-size: 0px"
        >
          <text style="font-size: 22rpx; color: white"
            >{{ _currentActive + 1 }}/{{ _list.length }}</text
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
/**
 * 图片轮播
 * @description 可以嵌入视频，图片。
 */
import { ref, PropType, computed, getCurrentInstance, nextTick } from "vue";

import tmImage from "../tm-image/tm-image.vue";
import tmSheet from "../tm-sheet/tm-sheet.vue";
import { listItem, listItemType, listItemTypeStr } from "./interface";
const proxy = getCurrentInstance()?.proxy ?? null;
const emits = defineEmits(["change", "click"]);
const props = defineProps({
  followTheme: {
    type: Boolean,
    default: true,
  },
  color: {
    type: String,
    default: "primary",
  },
  width: {
    type: Number,
    default: 750,
  },
  height: {
    type: Number,
    default: 500,
  },
  round: {
    type: Number,
    default: 0,
  },
  margin: {
    type: Array as PropType<Array<number>>,
    default: () => [0, 0],
  },
  list: {
    type: Array as PropType<Array<string | listItem>>,
    default: () => [],
  },
  rangKey: {
    type: String as PropType<listItemTypeStr>,
    default: "url",
  },
  defaultValue: {
    type: Number,
    default: 0,
  },
  //指示点的位置
  //top,left,right,bottom
  dotPosition: {
    type: String,
    default: "bottom",
  },
  //内容居对齐，左，中，右，在dotPosition为left,right时，align的left和right表示，上下对齐。
  //left,center,right
  align: {
    type: String,
    default: "center",
  },
  //dot,number,rect
  model: {
    type: String,
    default: "number",
  },
  interval: {
    type: Number,
    default: 5000,
  },
  duration: {
    type: Number,
    default: 500,
  },
  circular: {
    type: Boolean,
    default: true,
  },
  vertical: {
    type: Boolean,
    default: false,
  },
  acceleration: {
    type: Boolean,
    default: false,
  },
  disableProgrammaticAnimation: {
    type: Boolean,
    default: false,
  },
  autoplay: {
    type: Boolean,
    default: true,
  },
  displayMultipleItems: {
    type: Number,
    default: 1,
  },
  skipHiddenItemLayout: {
    type: Boolean,
    default: false,
  },
  disableTouch: {
    type: Boolean,
    default: false,
  },
  touchable: {
    type: Boolean,
    default: false,
  },
  indicatorDots: {
    type: Boolean,
    default: true,
  },
  //是否显示加载动画
  showLoad: {
    type: Boolean,
    default: true,
  },
});
const _list = computed(() => {
  let l: Array<listItem> = [];
  props.list.forEach((el) => {
    if (typeof el == "string") {
      l.push({
        url: el,
        type: listItemType.img,
      });
    } else if (typeof el === "object") {
      l.push({
        url: el[props.rangKey],
        type: el?.type ?? listItemType.img,
        img: el?.img ?? "",
        ...el,
      });
    }
  });
  return l;
});

const _current = ref(props.defaultValue || 0);
const _currentActive = ref(props.defaultValue || 0);
const _model = computed(() => props.model);
const _dotPosition = computed(() => props.dotPosition);
const _align = computed(() => props.align);
const _autoplay = computed(() => props.autoplay);
function sliderChange(e: any) {
  if (!_autoplay.value) {
    _current.value = e?.detail?.current;
  }
  _currentActive.value = e?.detail?.current;
  nextTick(() => {
    emits("change", _currentActive.value);
  });
}
function dotClick(index: number) {
  _currentActive.value = index;
  if (!_autoplay.value) {
    _current.value = index;
  }
}
</script>

<style></style>
